{% extends 'base.html' %}
{% load static %}
{% block css %}
    <link href="{% static 'fine-uploader/fine-uploader-gallery.min.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12 col-lg-8">
            <form class="form-horizontal" role="form" id="form">
                {#型号#}
                <div class="form-group">
                    <label for="marker" class="control-label col-md-2">型号</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="marker" placeholder="型号" value="MDC 16MY16"
                               required>
                    </div>
                </div>

                {#        尺寸#}
                <div class="form-group">
                    <label class="control-label col-md-2" for="size">尺寸</label>
                    <div class="col-md-3">
                        <select name="select_size" id="size" class="form-control" form="form">
                            <option value="16">16"</option>
                            <option value="17">17"</option>
                            <option value="18">18"</option>
                            <option value="19">19"</option>
                        </select>
                    </div>
                </div>

                {#        气门嘴#}
                <div class="form-group">
                    <label for="hole" class="control-label col-md-2">气门嘴</label>
                    <div class="col-md-3">
                        <select name="select_hole" id="hole" class="form-control" form="form">
                            <option value="一般">一般</option>
                            <option value="特殊">特殊</option>
                        </select>
                    </div>
                </div>

                {#        工艺#}
                <div class="form-group">
                    <label for="technique" class="control-label col-md-2">工艺</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="technique" placeholder="工艺" value="C/G" required>
                    </div>
                </div>

                {#        颜色#}
                <div class="form-group">
                    <label for="color" class="control-label col-md-2">颜色</label>
                    <div class="col-md-3">
                        <select name="select_color" id="color" class="form-control" form="form">
                            <option value="银">银</option>
                            <option value="灰">灰</option>
                            <option value="黒">黒</option>
                        </select>
                    </div>
                </div>

                {#        客户#}
                <div class="form-group">
                    <label for="customer" class="control-label col-md-2">客户</label>
                    <div class="col-md-3">
                        <select name="select_customer" id="customer" class="form-control" form="form">
                            <option value="美">美国</option>
                            <option value="韩">韩国</option>
                            <option value="印">印度</option>
                            <option value="巴">巴西</option>
                        </select>
                    </div>
                </div>

                {#        顶视图#}
                <div class="form-group" hidden>
                    <label for="image_top" class="control-label col-md-2">顶视图</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="image_top" placeholder="顶视图">
                    </div>
                </div>

                {#        条码#}
                <div class="form-group" hidden>
                    <label for="code" class="control-label col-md-2">条形码</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="image_code" placeholder="条形码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2 col-md-offset-2">
                        <button id="btn_submit" class="form-control">提交</button>
                    </div>
                </div>
                {% csrf_token %}
            </form>
            {# 表单，左侧 #}
        </div>

        <div class="col-md-12 col-lg-4">
            <div class="row">
                <div class=" label label-info">顶视图</div>
            </div>
            <div class="row">
                <div id="uploader"></div>
            </div>
            <div class="row">
                <div class=" label label-info">条形码</div>
            </div>
            <div class="row">
                <div id="uploader_2"></div>
            </div>
        </div>
        {#    end#}
    </div>
    {#    通知#}
    <div id="notify"></div>
{% endblock %}
{% block script %}
    <script src="/static/fine-uploader/fine-uploader.min.js"></script>
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                     class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>选择图片</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite"
                aria-relevant="additions removals">
                <li>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                    <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                             class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <div class="qq-thumbnail-wrapper">
                        <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                    </div>
                    <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                    <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                        <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                        Retry
                    </button>

                    <div class="qq-file-info">
                        <div class="qq-file-name">
                            <span class="qq-upload-file-selector qq-upload-file"></span>
                            <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon"
                                  aria-label="Edit filename"></span>
                        </div>
                        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                        <span class="qq-upload-size-selector qq-upload-size"></span>
                        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                            <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                        </button>
                        <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                            <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                        </button>
                        <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                            <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                        </button>
                    </div>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>
    <script>
        var uploader = new qq.FineUploader({
            element: document.getElementById("uploader"),
            request: {
                endpoint: '/upload'
            },
            multiple: false,
            deleteFile: {
                enabled: true, // defaults to false
                endpoint: '/upload'
            },
            editFilename: {
                enabled: true, // defaults to false
                endpoint: '/upload'
            },
            scaling: {
                sendOriginal: false,
                sizes: [
                    //{name: "small", maxSize: 300},
                    {name: "", maxSize: 900}
                ]
            },
            callbacks: {
                onDeleteComplete: function (id, xhr, isError) {
                    console.log("删除" + id);
                },
                // 提交的文件已结束
                onComplete: function (id, name, responseJSON, xhr) {
                    console.log("顶视图尺寸：" + this.getSize(id));
                    if (responseJSON.success === true) {
                        var file = this.getUuid(id) + "/" + name;
                        console.log(file);
                        // 文件名写入顶视图字段
                        $("#image_top").val(file);
                    }
                }
            }
        });

        var uploader_2 = new qq.FineUploader({
            element: document.getElementById("uploader_2"),
            template: "qq-template",
            request: {
                endpoint: '/upload'
            },
            multiple: false,
            deleteFile: {
                enabled: true, // defaults to false
                endpoint: '/upload'
            },
            editFilename: {
                enabled: true, // defaults to false
                endpoint: '/upload'
            },
            scaling: {
                sendOriginal: false,
                sizes: [
                    //{name: "small", maxSize: 300},
                    {name: "", maxSize: 900}
                ]
            },
            callbacks: {
                onDeleteComplete: function (id, xhr, isError) {
                    console.log("删除" + id);
                },
                // 提交的文件已结束
                onComplete: function (id, name, responseJSON, xhr) {
                    console.log("条码图尺寸：" + this.getSize(id));
                    if (responseJSON.success === true) {
                        var file = this.getUuid(id) + "/" + name;
                        console.log(file);
                        // 文件名写入条形码字段
                        $("#image_code").val(file);
                    }
                }
            }
        });
    </script>
    <script>
        {#表单提交#}
        $(document).ready(function () {
            // csrf
            var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

            function csrfSafeMethod(method) {
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });
            $("#btn_submit").click(function (evt) {
                evt.preventDefault();
                $.post('/new/', {
                    "marker": $("#marker").val(),
                    "size": $("#size").val(),
                    "valve_hole": $("#hole").val(),
                    "technique": $("#technique").val(),
                    "color": $("#color").val(),
                    "customer": $("#customer").val(),
                    "image_top": $("#image_top").val(),
                    "image_code": $("#image_code").val()

                }, function (data) {
                    console.log(data.status);
                    // 通知
                    var notify = $("#notify");
                    notify.html(data.status);
                    notify.iziModal({
                       padding: 20,
                        headerColor: '#2fb974',
                        timeout: 2000,
                        title: '通知'
                    });
                    notify.iziModal('open');
                });

            });
        });
    </script>
{% endblock %}